<template>
	<view class="">
		
		
		
		<view class="" style="width: 750rpx;height: 1025rpx;">
			<image style="width: 100%;height: 100%;" src="../../static/ljyqhy.jpg" mode=""></image>
			<view class="">
				
				<button open-type="share" data-share-type="2" class="sendBtn">
					立即邀请好友
				</button>
			</view>
			<view @click="erweima" class="" style="margin-left: 300rpx;margin-top: 40rpx;display: flex;align-items: center;">
				<view class="">
					<u-icon name="share-square" color="#000" size="28"></u-icon>
				</view>
				<view class="">
					生成推广海报
				</view>
			</view>
			
			<view class="" style="display: flex;color: #F24364;margin-top: -500rpx;font-size: 50rpx;text-align: center;width: 450rpx;justify-content: space-around;margin-left: 150rpx;">
				<view class="">
					￥
				</view>
				<view class="" style="font-size: 100rpx;margin-top: -50rpx;">
					{{yhqPrice}} 
				</view>
				<view class="">
					元
				</view>
			</view>
			<view class="" style="margin: 0 auto;font-size: 24rpx;margin-top: -250rpx;color: #F84C2D;width: 500rpx;background-color: red;text-align: center;">
				每邀请一位新用户下单得￥{{yhqPrice}}元优惠券
			</view>
			<view @click="gbewm" v-if="sendsImage !=''" class="" style="width: 100vw;height: 100vh;background-color: rgba(0,0,0,.5);position: fixed;top: 0;left: 0;">
				<image style="width: 500rpx;height: 550rpx;margin: 120rpx;" :src="sendsImage" mode=""></image>
			</view>
		</view>
		<view class="" style="width: 668rpx;height: 340rpx;;background-color: #fff;margin: 20rpx auto;margin-top: 40rpx;border-radius: 20rpx;">
			<view class="" style="">
				<image style="width: 324rpx;height: 81rpx;margin-top: -14rpx;margin-left:165rpx ;" src="../../static/tou.png" mode=""></image>
				<view class="" style="margin-top: -70rpx;margin-left: 270rpx;color: #fff;">
					奖励攻略
				</view>
			</view>
			
			<view class="" style="display: flex;margin-top: 50rpx;">
				<view class="" style="margin: 0 auto;text-align: center;">
					<image style="width: 135rpx;height: 135rpx;" src="../../static/yqhaoyou.png" mode=""></image>
					<view class="">
						邀请好友
					</view>
					
				</view>
				
				<view class="" style="margin: 0 auto;text-align: center;">
					<image style="width: 135rpx;height: 135rpx;" src="../../static/yonghuxiadan.png" mode=""></image>
					<view class="">
						用户下单
					</view>
					
				</view>
				
				<view class="" style="margin: 0 auto;text-align: center;">
					<image style="width: 135rpx;height: 135rpx;" src="../../static/getbaobei.png" mode=""></image>
					<view class="">
						获得奖励
					</view>
					
				</view>
				
				
				
			</view>
			
			
		</view>
		<view class="" style="width: 668rpx;height: 247rpx;;background-color: #fff;margin: 20rpx auto;border-radius: 20rpx;margin-top: 50rpx;">
		<view class="" style="">
			<image style="width: 324rpx;height: 81rpx;margin-top: -14rpx;margin-left:165rpx ;" src="../../static/tou.png" mode=""></image>
			<view class="" style="margin-top: -70rpx;margin-left: 270rpx;color: #fff;">
				我的成就
			</view>
		</view>
		
		<view class="" style="display: flex;justify-content: space-around;margin-top: 50rpx;text-align: center;align-items: center;">
			<view class="">
				<view class="">
					邀请好友
				</view>
				<view class="" style="color: red;">
					{{number}}
				</view>
			</view>
			<view class="">
				<view class="">
					获得奖励
				</view>
				<view class="" style="color: red;">
					{{coupon_money}}
				</view>
			</view>
			
			
		</view>
		</view>
		
		
		
		<view class="" style="width: 668rpx;height: 420rpx;;background-color: #fff;margin: 20rpx auto;border-radius: 20rpx;margin-top: 50rpx;">
		<view class="" style="">
			<image style="width: 324rpx;height: 81rpx;margin-top: -14rpx;margin-left:165rpx ;" src="../../static/tou.png" mode=""></image>
			<view class="" style="margin-top: -70rpx;margin-left: 270rpx;color: #fff;">
				邀请记录
			</view>
		</view>
		
			<view class="" style="width: 100%;height: 300rpx;margin-top: 55rpx;">
				<view class="" style="display: flex;align-items: center;margin-top: 10rpx;" v-for="(item,index) in yqdFriends" :key="index">
					<view class="" style="margin-left: 30rpx;">
						<image style="width: 80rpx;height: 80rpx;border-radius: 50rpx;" :src="item.avatar" mode=""></image>
					</view>
					<view class="" style="margin-left: 30rpx;">
						{{item.name}}
					</view>
				</view>
				
				
				
			</view>
		</view>
		
		
		<view class="" style="width: 100%;height: 100rpx;">
			
		</view>
		
	</view>
	
	
</template>

<script>
	export default {
		data(){
			return{
				share: {
					title:"商城",
					path:"",
					imageUrl:""
				},
				sendsImage:'',
				yhqPrice:'',
				number:'',
				coupon_money:'',
				yqdFriends:[],
			}
		},
		onShow() {
			this.getFriendsList()
		},
		methods:{
			onShareAppMessage(res) {
				// console.log(res,'查看分享成功与否')
				this.userIds = uni.getStorageSync('userId')
				return {
					title: "哈哈哈",
					path:`/pages/index/index`,
					imageUrl:``
				}
			},
			erweima(){
				this.$req('POST',this.$api.getTwoMa,{
					id:uni.getStorageSync('userId'),
					xcx_path:'/pages/index/index'
				}).then(res =>{
					console.log(res,'查看分享的二维码')
					this.sendsImage = res.data.url
				}) 
			},
			gbewm(){
				this.sendsImage = ''
			},
			getFriendsList(){
				this.$req('GET',this.$api.friendsList,{
					id:uni.getStorageSync('userId')
				}).then(res =>{
					console.log(res,'查看邀请的人数')
					this.yhqPrice = res.data.coupon.price
					this.coupon_money = res.data.coupon_money
					this.number = res.data.number
					this.yqdFriends = res.data.list.data
					
					
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F8FEC5;
	}
	
	.sendBtn{
		width: 650rpx;
		height: 150rpx;
		border-radius: 100rpx;
		margin-top: -265rpx;
		text-align: center;
		line-height: 150rpx;
		color: #fff;
		font-size: 60rpx;
		background: linear-gradient(to right, #ed6b35, #f1a469);
	}
	
	
	
	
</style>